<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Distributor Profile</title>
	<link type="text/css" rel="stylesheet" href="css/dth.css" />
	<script>
		$(document).ready(function() {
			$(".rtitle").hover(function() {
				$(this).css("background", "#544198");
			});
			$(".rtitle").mouseleave(function() {
				$(this).css("background", "#FF00FF");
			});
		});
	</script>
	<style>
.itemHeader {
	height: 30px;
	width: 98%;
	float: left;
	margin: 10px;
}

.itemHeader .title {
	float: left;
	width: 90%;
	height: 100%;
	font-size: 14px;
	font-weight: bold;
	line-height: 35px;
	color: #318edb;
}

.itemHeader .action {
	float: right;
	width: 2%;
	margin-top: 10px;
	height: 100%;
}

.itemContent {
	width: 100%;
	background: #E6E6FA;
	float: left;
	margin-top:
}

.space_line {
	width: 100%;
	height: 20px;
	float: left;
}

.itemContent .item1 {
	float: left;
	width: 30%;
	height: 100%;
}

.itemContent .action1 {
	float: left;
	width: 11%;
	height: 30px;
	margin-top: 6px;
}

.itemContent .item1 .titileField {
	color: #000000;
	font-size: 12px;
	font-weight: bold;
}

.itemContent .item1 .textField {
	margin-left: 15px;
	margin-top: 15px;
	width: 100%;
	float: left;
}

.line {
	width: 100%;
	height: 1px;
	background-color: #CA96D9;
	float: left;
}

.subtitle {
	font-size: 15px;
	font-weight: bold;
	text-decoration: underline;
}

.itemContent .action1 .ui-button-icon-only {
	width: 25px;
	margin-right: 5px;
}
</style>

</h:head>

<h:body>
	<p:growl id="growl" showDetail="true" sticky="false" />
	<p:ajaxStatus
		style="bottom: 68%;
	    height: 32px;
	    position: fixed;
	    right: 50%;
	    width: 32px;
	    z-index: 99999;">
		<f:facet name="start">
			<p:graphicImage value="images/loading.gif" />
		</f:facet>

		<f:facet name="complete">
			<h:outputText value="" />
		</f:facet>
	</p:ajaxStatus>
	<h:form id="dlgform">
		<p:dialog header="Change Password" widgetVar="dlg" id="dlg"
			width="500" height="auto" resizable="false">
			<ui:insert name="header_banner">
				<ui:include src="/include/change_pass.xhtml" />
			</ui:insert>
		</p:dialog>
	</h:form>

	<ui:insert name="header">
		<ui:include src="/header/header_dth.xhtml" />
	</ui:insert>
	<div>
		<div class="dth_body_home">
			<ui:insert name="header_banner">
				<ui:include src="/header/header_banner.xhtml" />
			</ui:insert>
			<div class="dth_content">
				<h:panelGroup rendered="#{loginBean.role==3}">
					<h:form id="form_user_infor">
						<ui:repeat var="item" value="#{distributorBean.distributors}">
							<div class="itemHeader">
								<div class="title">
									<h:outputText value="Personal information"></h:outputText>
								</div>
								<div class="action"></div>
							</div>
							<div class="line"></div>

							<div class="itemContent" style="height: 105px;">
								<div class="item1">
									<div class="textField">
										<h:outputText value="#{msg['name']}: "
											styleClass="titileField"></h:outputText>
										<h:outputText value="#{item.distributorName}"></h:outputText>
									</div>
								</div>
							</div>
							<div class="space_line"></div>
						</ui:repeat>
					</h:form>
				</h:panelGroup>
				<!-- ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss -->
				<div class="itemHeader">
					<div class="title">
						<h:outputText value="Account detail"></h:outputText>
					</div>
					<div class="action">
						<p:commandLink onclick="dlg.show()" update=":dlgform:dlgchange">
							<f:param value="update" name="action"></f:param>
							<f:param value="#{item.dealerId}" name="customer_id"></f:param>
							<img src="images/icon_edit.png" title="Edit" />
						</p:commandLink>
					</div>
				</div>
				<div class="line"></div>
				<div class="itemContent" style="height: 105px;">
					<div class="item1">
						<div class="textField">
							<h:outputText value="#{msg['login_username']}: "
								styleClass="titileField"></h:outputText>
							<h:outputText value="#{loginBean.userName}"></h:outputText>
						</div>
						<div class="textField">
							<h:outputText value="#{msg['login_password']}: "
								styleClass="titileField"></h:outputText>
							<h:outputText value="*****"></h:outputText>
						</div>
					</div>

				</div>
				<div class="space_line"></div>
				<!-- ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss -->
				<div class="line"></div>


				<div class="space_line"></div>
			</div>
		</div>
	</div>
	<ui:insert name="header">
		<ui:include src="/footer/footer_dth.xhtml" />
	</ui:insert>

</h:body>
</html>